<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="./css/global.css" rel="stylesheet" />
		<link href="./css/footer.component.css" rel="stylesheet" />
		<link href="./css/cinema.css" rel="stylesheet" />
		<link href="./css/film.component.css" rel="stylesheet" />
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/film.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$.ajax({
					url: './data/cinema.json',
					dataType: 'json',
					success(data) {
						//厅
						let hallCategoryList = data.hall_category_list;
						let hall = ``;
						hallCategoryList.forEach(function(val) {
							hall += `<div class="text-sm mr-2">${val.hall_category_name}</div>`
						});
						//改签
						let serviceList = data.service_list;
						let service = ``;
						serviceList.forEach(function(val) {
							service += `<div class="text-sm mr-2">${val.service_name}</div>`
						});
						let cinema = `<div class="container d-flex align-items-end"><img src="img/${data.cinema_cover_image}"
							class="w-20 mr-4 p-1 rounded bg-white">
						<div class="text-white">
							<div class="text-large text-bolder">${data.cinema_name}</div>
							<div class="text-big text-bold mt-1">${data.cinema_address}</div>
							<div class="mt-3 d-flex">
								${hall}
							</div>
							<div class="mt-2 d-flex">
								${service}
							</div>
							<div class="mt-2 d-flex">
								<div class="text-sm mr-2">${data.cinema_distance}</div>
								<div class="text-sm mr-2">${data.cinema_min_price}元起</div>
							</div>
						</div>
					</div>`;
						$('.cinema-desc').append(cinema);

						//影院播放电影
						$.ajax({
							url: './data/film_list.json',
							success(data) {
								const filmList = data.slice(0, 6);
								let a = ``;
								filmList.forEach(function(val) {
									a += fn(val);
								});

								$('.film-list').empty();
								$('.film-list').append(a);

								//绑定鼠标点击事件
								$('.text-decoration-none').click(function(e) {
									e.preventDefault(); //取消默认事件
									let filmName = $(this).find('.text-sm').html();
									//按电影名过滤符合条件的电影
									let film = filmList.filter(function(val) {
										return val.film_name == filmName;
									})[0];
									//分类
									let categoryList = film.category_list;
									let category = ``;
									categoryList.forEach(function(val) {
										category +=
											`<div class="ml-1">${val.category_name}</div>`
									});
									//主演
									let actorList = film.actor_list;
									let actor = ``;
									actorList.forEach(function(val) {
										actor +=
											`<div class="ml-1">${val.actor_name}</div>`
									});
									let f = `<div class="d-flex align-items-start pl-4">
											<div class="text-gray text-big text-bold">${film.film_name}</div>
											<div class="text-red text-big text-bold ml-4">${film.film_rank}</div>
											<div class="text-red text-xs ml-1 mt-1">分</div>
										</div>
										<div class="d-flex pl-4 text-sm text-muted mt-2">
											<div>时长：</div>
											<div class="ml-2">${film.film_duration}分钟</div>
											<div class="ml-4">类型：</div>
											<div class="ml-2 d-flex">
												${category}
											</div>
											<div class="ml-4">主演：</div>
											<div class="ml-2 d-flex">
												${actor}
											</div>
										</div>`;
									$('.film-desc').empty();
									$('.film-desc').append(f);
								})
							}
						})
					}
				})

			})
		</script>
	</head>
	<body>
		<div id="app" data-v-app="">
			<div class="container d-flex justify-between"><img src="img/logo.png" class="mr-2 align-self-center"
					style="height: 50px;">
				<div class="mr-auto d-flex"><a href="./index.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">首页</a><a
						href="./film_list.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-white text-muted text-hover-red">电影</a><a
						href="./cinema_list.html"
						class="py-3 px-2 text-bold text-decoration-none mr-2 bg-red text-white">影院</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">演出</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">榜单</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">热点</a><a
						href="./index.html"
						class="py-3 px-2 bg-white text-muted text-hover-red text-bold text-decoration-none mr-2">商城</a>
				</div>
				<div class="align-self-center d-flex mr-3"><input type="text"
						class="py-2 px-3 rounded-left outline-0 border-red-1" placeholder="找影视剧、影人、影院"><button
						class="text-white bg-red bg-hover-light-red py-2 px-3 outline-0 border-0 rounded-right"> 搜 索
					</button></div><a href="./login.html"
					class="align-self-center text-sm text-gray text-decoration-none text-hover-red mr-3"> 你好，请登录 </a><a
					href="./regist.html" class="align-self-center text-sm text-red text-decoration-none"> 免费注册 </a>
			</div>
			<div class="position-relative"><img src="./img/movie_bg.png" class="w-100">
				<div class="position-absolute l-0 b-3 w-100 cinema-desc">

				</div>
			</div>
			<div class="container mt-4 d-flex justify-between align-items-center">
				<div class="text-muted text-hover-red text-xl text-bolder hand"> &lt; </div>
				<div class="film-carousel-bar">
					<div class="film-carousel d-flex align-items-center film-list" style="left: 0px"></div>
				</div>
				<div class="text-muted text-hover-red text-xl text-bolder hand"> &gt; </div>
			</div>
			<div class="container mt-4 film-desc">
				<!-- 详情 -->
			</div>
			<div class="container mt-4">
				<div class="pl-2 d-flex align-items-center text-sm">
					<div class="text-muted mr-3">观影日期：</div>
					<div class="mr-2 px-2 py-1 hand rounded text-white bg-red">今天 9月1日 </div>
					<div class="mr-2 px-2 py-1 hand rounded text-gray">明天 9月2日 </div>
					<div class="mr-2 px-2 py-1 hand rounded text-gray">周六 9月3日 </div>
					<div class="mr-2 px-2 py-1 hand rounded text-gray">周日 9月4日 </div>
					<div class="mr-2 px-2 py-1 hand rounded text-gray">周一 9月5日 </div>
					<div class="mr-2 px-2 py-1 hand rounded text-gray">周二 9月6日 </div>
					<div class="mr-2 px-2 py-1 hand rounded text-gray">周三 9月7日 </div>
				</div>
			</div>
			<div class="container my-4">
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">11:30</div>
						<div class="mt-2 text-xs text-muted">13:20散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">10号-6FL厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">37.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">13:30</div>
						<div class="mt-2 text-xs text-muted">15:20散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">6号-REALD厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">40.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">14:05</div>
						<div class="mt-2 text-xs text-muted">15:55散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">VIP厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">104.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">14:50</div>
						<div class="mt-2 text-xs text-muted">16:40散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">7号4DX厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">儿童需购票</div>
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">60.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">15:40</div>
						<div class="mt-2 text-xs text-muted">17:30散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">5号-4K厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">儿童需购票</div>
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">40.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">16:20</div>
						<div class="mt-2 text-xs text-muted">18:10散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">6号-REALD厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">40.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">17:55</div>
						<div class="mt-2 text-xs text-muted">19:45散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">5号-4K厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">40.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">18:30</div>
						<div class="mt-2 text-xs text-muted">20:20散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">6号-REALD厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">40.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">19:00</div>
						<div class="mt-2 text-xs text-muted">20:50散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">VIP厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">儿童需购票</div>
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">104.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">19:30</div>
						<div class="mt-2 text-xs text-muted">21:20散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">7号4DX厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">儿童需购票</div>
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">60.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">20:20</div>
						<div class="mt-2 text-xs text-muted">22:10散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">5号-4K厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">44.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">21:00</div>
						<div class="mt-2 text-xs text-muted">22:50散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">6号-REALD厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">44.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
				<div class="my-3 py-3 px-4 rounded shadow shadow-hover-blue d-flex justify-between align-items-center">
					<div class="ml-5 d-flex flex-column align-items-center">
						<div class="text-big text-gray text-bold">21:50</div>
						<div class="mt-2 text-xs text-muted">23:40散场</div>
					</div>
					<div class="text-gray w-20 text-center">日语2D</div>
					<div class="d-flex flex-column align-items-center w-20">
						<div class="text-gray">7号4DX厅</div>
						<div class="mt-2 text-xs text-muted d-flex">
							<div class="mr-1">儿童需购票</div>
							<div class="mr-1">厅内禁止饮食</div>
						</div>
					</div>
					<div class="text-red w-20 text-center"><span class="text-xs">￥</span><span
							class="text-big text-bold ml-1">60.9</span></div><a href="./round.html"
						class="text-white bg-red bg-hover-light-red py-2 px-3 rounded border-0 outline-0 hand text-decoration-none">选座购票</a>
				</div>
			</div>
			<div class="footer-background">
				<div class="container footer">
					<div class="footer-left">
						<div class="footer-left-column">
							<div class="footer-primary">学掌门院线</div>
							<div class="footer-secondary">中国影迷使用得更多的院线平台</div>
							<div class="footer-secondary">学掌门平台打造的<span class="orange">"影视神器"</span></div>
							<div class="footer-secondary"><span class="orange">60,000</span> 多个专业分类</div>
							<div class="footer-secondary"><span class="orange">600,000</span> 多个影视资源</div>
							<div class="footer-secondary"><span class="orange">760,000,000</span> 多条影评</div>
							<div class="footer-secondary"><span class="orange">38,000</span> 多个影院</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">关于我们</div>
							<div class="footer-secondary">关于学掌门</div>
							<div class="footer-secondary">隐私政策</div>
							<div class="footer-secondary">院线平台服务协议</div>
							<div class="footer-secondary">网络信息侵权通知指引</div>
							<div class="footer-secondary">学掌门院线服务监督员</div>
							<div class="footer-secondary">网站地图</div>
							<div class="footer-secondary">联系我们</div>
						</div>
						<div class="footer-left-column">
							<div class="footer-primary">Vip服务</div>
							<div class="footer-secondary">院线攻略 免费体验</div>
							<div class="footer-secondary">影院问答 评估指南</div>
							<div class="footer-secondary">专业咨询 海量片源</div>
							<div class="footer-secondary">偏好设置 随机抽奖</div>
							<div class="footer-secondary">自动评论 账单统计</div>
							<div class="footer-secondary">消费分析 APP下载</div>
							<div class="footer-secondary">诱惑活动 发现更多</div>
						</div>
					</div>
					<div class="footer-right">
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门APP </div>
							<div class="footer-right-primary"> 扫描立即下载 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 订阅号 </div>
						</div>
						<div class="footer-right-column"><img src="./img/index_bottom_wechat.png">
							<div class="footer-right-primary"> 学掌门院线 </div>
							<div class="footer-right-primary"> 官方服务号 </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
